手順 3：ビューの作成と Wijmo ウィジェットの追加

この例では、プロジェクトのホームページ上にメニューを表示するビューを作成します。その後、Razor 構文を使用し、各商品の商品名をモデルから取得します。

以下の手順を実行します。

ソリューションエクスプローラで、Views を展開した後、Home を展開します。

Index.cshtml をダブルクリックして、ファイルを開きます。次のマークアップを使用し、順不同のリストを作成します。

ソースビュー	コードのコピー
<ul id = “menu”> </ul>

次の Razor 構文を<ul>タグ内に追加します。

ソースビュー	コードのコピー
@foreach (var c in Model) { <li><a href="#">@c.CategoryName</a> @if (c.Products != null && c.Products.Count > 0) { <ul> @foreach (var p in c.Products) { <li><a href="#">@p.ProductName</a></li> } </ul> } </li>

ソースビュー

コードのコピー

@foreach (var c in Model)
    {
        <li><a href="#">@c.CategoryName</a>
            @if (c.Products != null && c.Products.Count > 0)
            {
<ul>
                    @foreach (var p in c.Products)
                    {
                        <li><a href="#">@p.ProductName</a></li>
   
                    }
</ul>
            }
</li>

Shared フォルダを展開し、_Layout.cshtml をダブルクリックして、ファイルを開きます。
ソリューションエクスプローラで、Views | Home を展開し、Index.cshtml をダブルクリックして、ファイルを開きます。

終了のの後に、次の jQuery スクリプトを入力し、wijmenu ウィジェットを初期化します。

ソースビュー	コードのコピー
<scripttype="text/javascript"> $(document).ready(function () { $("#menu").wijmenu(); }); </script> }

[F5］を押して、プロジェクトを実行します。メニューは次のような表示になります。

メニュー項目の１つをクリックすると、次のように、サブメニューがドロップダウンします。